var str = '';
data.goodData.clothingMall.secondaryNavigation.forEach(function (ele, i) {

    str += `
                <li class="bItem">
                    <div class="dianJu">
                        <span class="iconfont icon-jiantou jiantou"></span>
                        <p class="titleClo">${ele.title}</p>
                        <div class="itemClo">  `;
    ele.goodType.forEach(function (ele1, i) {
        str += `                                 
                               <a href="#">${ele1}</a>

                    `;
    });
    str += `                                    </div>
                        </div>
                    <div class="subMenu">
                        <h3>${ele.good.goodtitle}</h3>
                        <ul class="cateList">
                            `;
    ele.good.goodShops.forEach(function (ele2, i) {
        str += `
     <li><a href="#" class="lianYi">${ele2}</a></li>`;
    });
    str += `
        </ul >
        <ul class="cateLogo clear">
            `;
    ele.good.logoImg.forEach(function (ele3, i) {
        str += `
                            <li>
                                <img src="${ele3}" class="imgss">
                            </li>
    
            `;
    });

    str += `</ul >
                    </div >
                </li >`;


})
$('.bMenu').html(str);

var str1 = '';
data.goodData.clothingMall.clothingMallGoods.forEach(function (ele4, i) {
    str1 += `
            <div class="clothes floors" id="t${i + 2}">
            <div class="girlClo">
            <div class="girlTit">
            <h2>${ele4.title}</h2>
            <h3>${i + 1}F</h3>
             <div class="extra">
            <ul class="girlMenu">
        `;
    ele4.goodType.forEach(function (ele5, i) {
        str1 += `
                        <li class="girlItem " value="${i}"> ${ele5} </li>
                    `;
    })
    str1 += `   
                    </ul>
                </div>
            </div>
            <div class="girlContent">
                <div class="girlLeft">
                    <a href="#">
                        <img src="${ele4.bigImg}"class="big">
                    </a>
                </div>
                `;

    str1 += `
                <div class="girlRight">
                    <div class="smallImg">
                        <div class="smallAd">
                            `;
    str1 += `
                            <a href="#">
                                <img src="${ele4.smallImg[0]}">
                            </a>
                        </div>
                        <div class="smallAd Lf">
                            <a href="#">
                                <img src="${ele4.smallImg[1]}">
                            </a>
                            `;

    str1 += `
                        </div>
                     </div>
                    <div class="conImg">
                        
                        
                            `;
        //  console.log(ele4.good);                   
    ele4.good.forEach(function (ele8, i) {
        str1 += `<ul class="conMenu" value="${i}">`;
        ele8.forEach(function(eleind,i){
            // console.log(eleind,i);
            str1 += `               
                                <li>
                                <img
                                    src="${eleind.goodImg}">
                                    <p class="conName">${eleind.goodtitle}</p>
                                    <div class="conPrice">${eleind.goodPrice}</div>
                            </li>
                            
                            `;
        })
        str1 += `</ul>`;
        
    });
    str1 += `
   
                    </div>
                </div>
                <ul class="girlBrands">
                    `;
    ele4.logoImg.forEach(function (ele9, i) {
        str1 += `
        <li class="brandsLogo">
            <img src="${ele9}" class="girLOgo">
        </li>
        `;
    });
    str1 += `
                </ul>
            </div>
        </div>
    </div>
    `;
})
$('.zhuijia').html(str1);

// var swiper = new Swiper("#swiper1", {
//     cssMode: true,
//     navigation: {
//         nextEl: "#next1",
//         prevEl: "#prev1",
//     },
//     pagination: {
//         el: ".swiper-pagination",
//         clickable: true,
//     },
//     mousewheel: true,
//     keyboard: true,
// });

var youSwiper = new Swiper('.swiperq', {
    // cssMode: true,
    loop: true, // 循环模式选项
    // autoplay: true,
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,

    },

    // 如果需要前进后退按钮
    navigation: {
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },
})


var t1Top = $('#t1').offset().top;
$(window).scroll(function () {
    if ($(this).scrollTop() > t1Top - 100) {
        $('.slide').show();//导航条显示
    } else {
        $('.slide').hide();//导航条隐藏
    }
    //监听楼层滚动，设置导航条楼层显示选中
    $('.floors').each(function (i, ele) {
        if ($(window).scrollTop() >= $(ele).offset().top) {
            $('.itemfl').eq(i).addClass('active').siblings().removeClass('active');
        }
    })
})
//点击导航条，跳转同时改色
$('.itemfl').click(function (e) {
    $(this).addClass('active').siblings().removeClass('active');
})
$('.back').click(function () {
    $('html').animate({ scrollTop: 0 }, 500);
})
$('.conImg>.conMenu:first-of-type').css('display', 'block');
$('.girlMenu>.girlItem:first-of-type').addClass('on');
$('.girlMenu>.girlItem').hover(function(){
    $(this).addClass('on').siblings().removeClass('on');
    var index = $(this).val();
    
    $($(this).parents('.girlClo').find('.conImg>.conMenu')[index]).css('display','block').siblings().css('display', 'none');
})